{% extends "base.html" %}
{% block mainbody %}
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <meta charset="utf-8"/>
        <script src="/static/js/echarts.min.js"></script>
    </head>
    <title>关系</title>
    <div class="container">
    <div class="row">
        <!--head start-->
        <div class="col-md-12">
            <h3 class="page-header"><i class="fa fa-link" aria-hidden="true"></i> 关系查询 </h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="\">Home</a></li>
                <li><i class="fa fa-link" aria-hidden="true"></i>关系查询</li>
            </ol>
        </div>

        <div class="col-md-12">
            <div class="panel panel-default">
                <header class="panel-heading">
                    查询条件：
                </header>
                <div class="panel-body">

                    <form id="searchRelationForm" class="form-inline" style="padding-left: 10% ; padding-right: 10%"
                          method="get">
                        <div id="entity1" class="form-group" style="padding: 2%">
                            <input type="text" id="entity1_text" name="entity1" class="form-control"
                                   placeholder="实体１" aria-describedby="basic-addon1">
                        </div>
                        <!--dropdown combobox start-->
                        <div class="btn-group" style="padding: 2%"><a
                                class="btn btn-default dropdown-toggle btn-select form-control" data-toggle="dropdown"
                                id="btnCountry">Select a Relation <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                {% for rel in relas %}
                                    <li><a href="#">{{ rel.name }}</a></li>
                                {% endfor %}
                                <li class="divider"></li>
                                <li><a href="#"><span class="glyphicon glyphicon-star"></span>Other</a></li>
                            </ul>
                        </div>
                        <!--dropdown combobox end-->
                        <div id="relation_name" class="form-group hide" style="padding: 2%">
                            <input type="text" id="relation_name_input" name="relation" class="form-control"
                                   placeholder="输入关系名称" aria-describedby="basic-addon1">
                        </div>
                        <div id="entity2" class="form-group" style="padding: 2%">
                            <input type="text" id="entity2_text" name="entity2" class="form-control"
                                   placeholder="实体２" aria-describedby="basic-addon1">
                        </div>
                        <div class="btn-group" style="padding: 2%">
                            <button type="button" id="btnSearch" class="btn btn-primary"
                                    onclick="document.getElementById('searchRelationForm').submit();">Search
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {% ifequal isexist False %}
            <div class="col-md-12">
                <div class="panel panel-default">
                    <header class="panel-heading">
                        查询结果：
                    </header>
                    <div class="panel-body">
                        <div style="padding: 2%">
                            <h2>暂未找到相应的匹配</h2>
                        </div>
                    </div>
                </div>
            </div>
        {% endifequal %}

        {% if isexist %}

            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div class="col-md-12">
                <div class="panel panel-default ">
                    <header class="panel-heading">
                        关系图 :
                    </header>
                    <div class="panel-body ">
                        <div id="graph" style="width: 100%;height:600px;"></div>
                    </div>
                </div>
            </div>
            <!-- Footable -->
            <div class="col-md-12">
                <div class="panel panel-default">
                    <header class="panel-heading">
                        关系列表 :
                    </header>
                    <div class="panel-body">
                        <table class="table" data-paging="true" data-sorting="true">
                            <tr>
                                <th>实体一</th>
                                <th>关系</th>
                                <th>实体二</th>
                            </tr>
                            {% for r in result.relation %}
                                <tr>
                                    <td>{{ r.source }}</td>
                                    <td>{{ r.name }}</td>
                                    <td>{{ r.target }}</td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>
            </div>
        {% endif %}

    </div>
    </div>
    <script src="/static/js/jquery-1.8.3.min.js"></script>
    {% if isexist %}
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('graph'));
            var searchResult = {{searchResult|safe}}
                //用表格列出所有的关系
                tableData = []
            for (var i = 0; i < searchResult.length; i++) {
                relationData = {};
                relationData['entity1'] = searchResult[i]['n1']['title'];
                relationData['relation'] = searchResult[i]['rel']['type'];
                relationData['entity2'] = searchResult[i]['n2']['title'];
                tableData.push(relationData);
            }
            jQuery(function () {
                $('.table').footable({
                    "columns": [{"name": "entity1", title: "Entity1"},
                        {"name": "relation", title: "Relation"},
                        {"name": "entity2", title: "Entity2"}],
                    "rows": tableData
                });
            });

            //echarts 数据
            var data = [];
            var links = [];

            //构造展示的数据
            var maxDisPlayNode = 15;
            var id = 0;
            for (var i = 0; id < maxDisPlayNode && i < searchResult.length; i++) {
                //获取node1
                node1 = {};
                node1['name'] = searchResult[i]['n1']['title'];
                node1['draggable'] = true;
                if ('url' in searchResult[i]['n1']) {
                    node1['category'] = 1;
                }
                else {
                    node1['category'] = 2;
                }
                var flag = 1;

                relationTarget = id.toString();
                for (var j = 0; j < data.length; j++) {
                    if (data[j]['name'] === node1['name']) {
                        flag = 0;
                        relationTarget = data[j]['id'];
                        break;
                    }
                }

                node1['id'] = relationTarget;
                if (flag === 1) {
                    id++;
                    data.push(node1);
                }

                //获取node2
                node2 = {};
                node2['name'] = searchResult[i]['n2']['title'];
                node2['draggable'] = true;
                if ('url' in searchResult[i]['n2']) {
                    node2['category'] = 1;
                }
                else {
                    node2['category'] = 2;
                }
                flag = 1;
                relationTarget = id.toString();
                for (var j = 0; j < data.length; j++) {
                    if (data[j]['name'] === node2['name']) {
                        flag = 0;
                        relationTarget = data[j]['id'];
                        break;
                    }
                }
                node2['id'] = relationTarget;
                if (flag === 1) {
                    id++;
                    data.push(node2);
                }
                //获取relation
                relation = {}
                relation['source'] = node1['id'];
                relation['target'] = node2['id'];
                relation['category'] = 0;
                flag = 1;
                for (var j = 0; j < links.length; j++) {
                    if (links[j]['source'] == relation['source'] && links[j]['target'] == relation['target']) {
                        links[j]['value'] = links[j]['value'] + searchResult[i]['rel']['type'];
                        flag = 0;
                        break;
                    }
                }
                if (flag === 1) {
                    relation['value'] = searchResult[i]['rel']['type'];
                    relation['symbolSize'] = 10;
                    links.push(relation);
                }

            }


            // 基于准备好的dom，初始化echarts实例

        </script>
        <script>
        option = {
                title: {text: '人民的名义关系图谱'},
                tooltip: {
                    formatter: function (x) {
                        return x.data.des;
                    }
                },
                series: [
                    {
                        type: 'graph',
                        layout: 'force',
                        symbolSize: 30,
                        roam: true,
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            normal: {
                                textStyle: {
                                    fontSize: 20
                                }
                            }
                        },
                        force: {
                            repulsion: 2500,
                            edgeLength: [10, 50]
                        },
                        draggable: true,
                        itemStyle: {
                            normal: {
                                color: '#4b565b'
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: '#4b565b'

                            }
                        },
                        edgeLabel: {
                            normal: {
                                show: true,
                                formatter: function (x) {
                                    return x.data.name;
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                textStyle: {}
                            }
                        },
                        data: {{ result.entity|safe }},
                        links: {{ result.relation|safe }}
                    }
                ]
            };
            myChart.setOption(option);
        </script>
    {% endif %}
    <script>

        $(".dropdown-menu li a").click(function () {
            var selText = $(this).text();
            $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
            if (selText.trim() != "Other") {
                $("#relation_name_input").val(selText.trim());
            }
            //combobox behavior
            if (selText.trim() === "Other") {
                $("#relation_name").removeClass("hide");
            }
            else {
                $("#relation_name").addClass("hide");
            }

        });


        // $("#btnSearch").click(function(){
        // 	alert($('.btn-select').text()+", "+$('.btn-select2').text());
        // });
    </script>
{% endblock %}
